import React from "react"
import GpContainer from "@/components/GpContainer"
import { View } from "@tarojs/components"
import GpBlockTitle from "@/components/GpBlockTitle"
import GpNewsItem from "@/components/GpNewsItem"
import GpColumnArticle from "@/components/GpColumnArticle"
import GpMustReadItem from "@/components/GpMustReadItem"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import Taro from "@tarojs/taro"
import { getColumnDetail } from "@/apis/index"
import { pageMapper } from "@/constants/pageMap"
import { commonUrls, makePagePath } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import styles from "./index.module.scss"
import clsx from "clsx"

const ports = [{ text: "专题主页" }]
type IState = {
  topic: any
  /** 资讯 */
  news: any[]
  /** 更多专题 */
  moreTopic: any[]
}
type IData = {
  id: string
}
class TrainGuide extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      topic: null,
      news: [],
      moreTopic: []
    }
    this.extData = {
      id: ""
    }
  }
  onShareAppMessage() {}
  onLoad(options: Recordable) {
    this.extData.id = options.id
    this.getDetailData()
  }
  componentDidShow() {
    this.setPageInfo(this.state.topic)
  }
  setPageInfo = (topic: INullable<any>) => {
    if (topic) {
      setPageMeta({
        keywords: `${topic.keyword}`,
        title: `${topic.title}-择艺宝`,
        description: topic.introduction
      })
    }
  }
  getDetailData = () => {
    Taro.showLoading()
    getColumnDetail(this.extData.id)
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const _moreTopic = retData.moreTopic || []
          _moreTopic.forEach(l => {
            l.url = makePagePath(pageMapper.columnMain, { id: l.id })
          })
          this.setState({
            topic: retData.topic,
            news: retData.news || [],
            moreTopic: _moreTopic
          })
          this.setPageInfo(retData.topic)
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  renderTopCard = () => {
    const { topic } = this.state
    return (
      <View className="bg-hex-fff px-30px pt-20px relative">
        <GpColumnArticle
          border={false}
          className={styles["topCard"]}
          article={topic}
          titleBold
          navigation={false}
        />
      </View>
    )
  }
  renderList = () => {
    const { news } = this.state
    const len = news.length
    return (
      <View className="bg-hex-fff pt-64px px-30px">
        <View className="yahei font-normal text-24px text-hex-b8b8bf pb-34px">*文章按热度排行</View>
        <View className="flex flex-col">
          {news.map((l, index) => {
            return (
              <View
                key={index}
                className={clsx({
                  "mb-48px": index !== len - 1
                })}
              >
                <GpMustReadItem mustReadItem={l} />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  /** 更多专题 */
  renderMoreColumn = () => {
    const { moreTopic } = this.state
    const len = moreTopic.length
    if (len <= 0) return null
    return (
      <View className="pt-88px pb-40px px-30px bg-hex-fff">
        <View className="pb-34px">
          <GpBlockTitle title="更多专题" showArrow navigatorLink={commonUrls.columnArticle} />
        </View>
        <View className="flex flex-col">
          {moreTopic.map((l, index) => {
            return (
              <View
                key={index}
                className={clsx({
                  "mb-28px": index !== len - 1
                })}
              >
                <GpNewsItem text={l.title} time={l.date} navigationLink={l.url} />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    if (!this.state.topic) return null
    return (
      <GpContainer>
        <View>
          {this.renderTopCard()}
          {/* 文章列表 */}
          {this.renderList()}
          {/* 更多专题 */}
          {this.renderMoreColumn()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default TrainGuide
